<template>
	<section v-loading="listLoading">
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item class="fr">
				    <el-button type="primary" size="medium" plain @click="handleAdd">新增</el-button>
			   </el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="users" stripe highlight-current-row border @selection-change="selsChange" style="width: 100%;">
			<!--<el-table-column type="selection" min-width="40" align="center">
			</el-table-column>-->
            <el-table-column prop="id" label="ID" min-width="60" align="center">
			</el-table-column>
			<el-table-column prop="avatar" label="头像" align="center" width="70">
                <template slot-scope="scope">
                	<el-popover placement="top-start" title="" trigger="click" v-if="scope.row.avatar">
                		<img :src="scope.row.avatar" alt="" style="width: 500px;height: 500px;border-radius:50%; vertical-align:middle;object-fit: cover;"/>
                		<img slot="reference" :src="scope.row.avatar" style="width: 50px;height: 50px;border-radius: 50%;vertical-align: middle;object-fit: cover;"/>
                	</el-popover>
                	
                </template>
            </el-table-column>
			<el-table-column prop="nickName" label="微信昵称" min-width="60" align="center">
			</el-table-column>
			<el-table-column prop="weixinOpenid" label="openid" min-width="60" align="center">
			</el-table-column>
			<el-table-column prop="createTime" label="绑定时间" :formatter="formatDate"  min-width="100" align="center">
			</el-table-column>
			<el-table-column label="操作" width="100" align="center">
				<template slot-scope="scope">
					<!--<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
					<el-button type="danger" size="mini" plain @click="handleDel(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--新增界面-->
		<el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false" width="340px">
			<div id="qrcode" ref="qrcode"></div>
			<div class="title">打开微信，进行扫码，绑定消息通知账号</div>
		</el-dialog>
	</section>
</template>

<script>
// 需要在页面中引入
import QRCode from 'qrcodejs2'

	export default {
		data() {
			return {
				
				filters: {
					content: '',
				},
                data:{},
				users: [],
				data:[],
				sels: [],
				total: 0,
				page: 1,
				pageSize: 10,
				listLoading: false,
				
				addFormVisible: false,
				addLoading: false,
				addForm: {
					bindingNo: '',
				},
				timer:null
			}
		},
		
		methods: {
			
			//时间转换开始时间 
			formatDate(row, column) {
                let date = new Date(parseInt(row.createTime));
                let Y = date.getFullYear() + '-';
                let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
                let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
                let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
                let m = date.getMinutes()  < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
                let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                return Y + M + D + h + m + s;
            },
			
			handleCurrentChange(val) {
				this.page = val;
				this.getUsers();
			},
			//获取用户列表
			getUsers:function (){
				this.listLoading = true;
				let para = {
					
				};
				var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},
			    });  
			    instance.post('admin/managementPush/bindingList', this.qs.stringify(para)).then(data => {
					let  res = data.data;
					console.log(data);
					if (res.code !== 0) {
						this.$message({
							message: res.msg,
							type: 'error'
						});
					} else {
						console.log(res)
						this.users = res.data;
						this.listLoading = false;
					}
				});
			},
			
			selsChange: function (sels) {
				this.sels = sels;
			},
			//显示新增界面
			handleAdd: function () {
				this.addFormVisible = true;
				var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},
			    });  
			    instance.post('admin/managementPush/addBinding').then(data => {
					let  res = data.data;
					console.log(data);
					if (res.code !== 0) {
						this.$message({
							message: res.msg,
							type: 'error'
						});
					} else {
						this.$nextTick(function(){
					        let dom = document.getElementById("qrcode");
					        while (dom.firstChild) {
					          dom.removeChild(dom.firstChild);
					        }
					        this.qrcodeScan(res.data.bindingUrl)
					    });
					    this.timer = setInterval(()=>{
					    	this.getStatus(res.data.bindingNo)
					    },1000)
					    
					}
				});
			},
			//生成二维码
			qrcodeScan(url) { //生成二维码
				let qrcode = new QRCode(document.getElementById("qrcode"), {
					width: 300, // 二维码宽度 
					height: 300, // 二维码高度
					text: url, // 浏览器地址url
					colorDark: "#000000",
					colorLight: "#ffffff",
					correctLevel: QRCode.CorrectLevel.H,
				})
				// console.log(window.location.href);
			},
			//绑定状态
			getStatus(bindingNo){
				var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},
			    });  
			    instance.post('admin/managementPush/getBindingStatus',this.qs.stringify({bindingNo:bindingNo})).then(data => {
					let  res = data.data;
					console.log(data);
					if (res.code !== 0) {
						this.$message({
							message: res.msg,
							type: 'error'
						});
					} else {
						if(res.data.status){
							this.addFormVisible = false
							this.getUsers()
							clearInterval(this.timer)
						}
					}
				});
			},
			//批量删除
			batchRemove: function () {
				var ids = this.sels.map(item => item.id).toString();
				this.handleDel(ids);
			},
			//删除
			handleDel(id) {
				this.$confirm('确认删除吗?', '提示', {}).then(() => {
					this.listLoading = true;
					var instance = this.$http.create({headers: {'content-type': 'application/x-www-form-urlencoded','admin_five_palace_token':JSON.parse(sessionStorage.getItem('token'))},
				    });  
				    instance.post('admin/managementPush/delBinding', this.qs.stringify({id: id})).then(data => {
						
						let  res = data.data;
						if (res.code !== 0) {
							this.$message({
								message: res.msg,
								type: 'error'
							});
						} else {
							this.$message({
								message: '成功',
								type: 'success'
							});
							this.getUsers();
						}
					})
				}).catch(() => {

				});
			},
		},
		mounted() {
			this.getUsers();
		},
		beforeDestroy() {
			if(this.timer) {
			　　　clearInterval(this.timer); //关闭
			}
		}
	}

</script>

<style scoped>
	.advice{
		margin-left: 80px;
		margin-bottom: 10px;
		font-size: 12px;
	}
	.title{
		text-align: center;
		padding-top: 15px;
	}
</style>

